<template>
  <div>
    <div class="group-operation-title-box border">
      <div class="group-operation-title">
        <div class="large-title">集团运营指标</div>
        <div class="small-title">{{ deadlineTitle }}</div>
        <div class="small-title">单位：万元</div>
      </div>
      <div class="dropdown-box">
        <div class="time-select">
          <el-date-picker size="mini" :clearable="false" v-model="selectTimeStr" type="month" format="yyyy年M月" placeholder="请选择" @change="changeTime"> </el-date-picker>
        </div>
      </div>
    </div>
    <div class="grid-box">
      <div class="grid-box-left" @click="getDetail(dataInfoIn, 'year', ['1', '3'])">
        <div class="fill-box">
          <group-norm-item :isTop="true" :imgPath="cashTotalIncome" :normType="1" title="累计现金流入" :currentMoney="dataInfoIn.totalPrice" :planMoney="dataInfoIn.totalPlantPrice" :errorPercentage="dataInfoIn.totalPlantDeviationPrice"></group-norm-item>
        </div>
        <div class="grid-bottom">
          <div class="half-box">
            <group-norm-item title="经营活动现金流入" :normType="1" :currentMoney="dataInfoIn.itemDtos[0].totalPrice" :planMoney="dataInfoIn.itemDtos[0].totalPlantPrice" :errorPercentage="dataInfoIn.itemDtos[0].totalPlantDeviationPrice"></group-norm-item>
          </div>
          <div class="half-box">
            <group-norm-item title="非经营活动现金流入" :normType="1" :currentMoney="dataInfoIn.itemDtos[1].totalPrice" :planMoney="dataInfoIn.itemDtos[1].totalPlantPrice" :errorPercentage="dataInfoIn.itemDtos[1].totalPlantDeviationPrice"></group-norm-item>
          </div>
        </div>
      </div>
        <div class="grid-box-middle-line"></div>
      <div class="grid-box-right" @click="getDetail(dataInfoOut, 'year', ['2', '4'])">
        <div class="fill-box">
          <group-norm-item :isTop="true" :imgPath="cashTotalPay" :normType="2" title="累计支出" :currentMoney="dataInfoOut.totalPrice" :planMoney="dataInfoOut.totalPlantPrice" :errorPercentage="dataInfoOut.totalPlantDeviationPrice"></group-norm-item>
        </div>
        <div class="grid-bottom">
          <div class="half-box">
            <group-norm-item title="经营活动支出" :normType="2" :currentMoney="dataInfoOut.itemDtos[0].totalPrice" :planMoney="dataInfoOut.itemDtos[0].totalPlantPrice" :errorPercentage="dataInfoOut.itemDtos[0].totalPlantDeviationPrice"></group-norm-item>
          </div>
          <div class="half-box">
            <group-norm-item title="非经营活动支出" :normType="2" :currentMoney="dataInfoOut.itemDtos[1].totalPrice" :planMoney="dataInfoOut.itemDtos[1].totalPlantPrice" :errorPercentage="dataInfoOut.itemDtos[1].totalPlantDeviationPrice"></group-norm-item>
          </div>
        </div>
      </div>
    </div>
    <cash-dialog ref="cashDialog" :selectTime="selectTime" :bizType="bizType" :title="title"></cash-dialog>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import cashDialog from './cashDialog';
  import { apicashFlowStatistics } from '@a/about';
  import groupNormItem from './groupNormItem.vue';
  export default {
    data() {
      return {
        selectTimeStr: dayjs(new Date(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)),
        selectTime: dayjs(new Date(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)).format('YYYY-MM'),
        dataInfoIn: {
          itemDtos: [{}, {}],
        },
        dataInfoOut: {
          itemDtos: [{}, {}],
        },
        bizType: [],
        type: 'year',
        deadlineTitle: '',
        title: '',
        cashTotalIncome: require('@g/imgs/expenditure.png'),
        cashTotalPay: require('@g/imgs/income.png'),
      };
    },
    created() {
      this.getInfo();
    },
    methods: {
      async getDetail(dataInfoIn, type, bizType) {
        this.type = type;
        this.bizType = bizType;
        this.title = this.type == 'year' ? '现金流全年执行' : new Date(this.selectTime).getMonth() + 1 + '月现金流预测';
        await this.$nextTick();
        this.$refs.cashDialog.init();
      },
      async getInfo() {
        let res = await apicashFlowStatistics({
          month: new Date(this.selectTime).getMonth() + 1,
          year: new Date(this.selectTime).getFullYear(),
        });
        this.deadlineTitle = res.deadlineTitle;
        if (res.rows && res.rows.length > 0) {
          res.rows.forEach(ele => {
            if (ele.cashFlowBizType == 'inflow') {
              this.dataInfoIn = ele;
            } else {
              this.dataInfoOut = ele;
            }
          });
        }
      },
      changeTime() {
        this.selectTime = dayjs(this.selectTimeStr).format('YYYY-MM');
        this.getInfo();
        this.$emit('changeTime', this.selectTime);
      },

      goDictionary(name) {
        let url = '/businessAssets/dataDic/index?token=1BECA34141E04A338B570F70C780C955&menuId=caa9147d6ba64e1a95bd3eeb76cc5203&parentMenuId=7ee2400d0e72437aa3bdb5823497537f&timestamp=1667202507216&keyWord=' + name;
        window.open(url);
      },
    },
    computed: {
      month() {
        return dayjs(this.selectTime).month() + 1;
      },
    },
    components: {
      cashDialog,
      groupNormItem,
    },
  };
</script>

<style lang="scss" scoped>
  .group-operation-title-box {
    padding-bottom: 10px;
    margin-top: -5px;
  }

  .fill-box {
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .grid-box {
    display: flex;
    justify-content: flex-start;
    .grid-box-left,
    .grid-box-right {
      margin-top: 10px;
      padding-bottom: 10px;
      width: 50%;
      .grid-bottom {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
      }
    }
    .grid-box-left:hover,
    .grid-box-right:hover {
      box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.15);
    }
    
      .grid-box-middle-line {
        width: 1px;
        background: #e5e5e5;
        height: 270px;
        margin:10px 20px 0;
      }
  }
  .half-box {
    width: 48%;
  }
</style>
